inputRichText

The ICEfaces inputRichText component uses the FCKEditor API to provide JSF based rich text component.

The following code shows how to create a simple inputRichText component

<ice:inputRichText
   
    value="#{bean.value}" 
/>

The following steps are involved in creating the custom toolbar:

1. Create a config file under the webapp, defining the custom toolbar(e.g.) js/config.js
   

   		FCKConfig.ToolbarSets["MyToolbar"] = [['Bold','Italic', 'Underline'], ['Save']] ;

   
   
   
2. Set the "toolbar" attribute on the inputRichText component to define the custom toolbar name and set the "customConfigPath" attribute to reference the custom config.js.(e.g.)
   

   		 <ice:inputRichText toolbar="MyToolbar"  customConfigPath="js/config.js"/>
   		

The following steps are involved in defining the custom CSS:

1. Copy the fck_editorarea.css from the FCKeditor distribution to your app and customize it(e.g.) css/fck_editorarea.css
   
   
2. Create a config file under the webapp, overriding the "FCKConfig.EditorAreaCSS" property(e.g.) js/config.js
   

   		FCKConfig.EditorAreaCSS = 'http://'+ window.location.host +'/'+window.location.pathname.split("/")[1]+'/css/fck_editorarea.css' ;

   
   
   
3. Set the "customConfigPath" attribute to reference the custom config.js.(e.g.)
   

   		 <ice:inputRichText customConfigPath="js/config.js"/>